<template>
  <div>
    <img :src="upIcon" alt="上传图标不见啦" width="64px">
    <input id="file" accept="image/*" multiple name="file" title="上传图片"
           type="file" @change="addFiles"/>

    <button v-show="isUpLoadAvailable" @click="upLoad">上传涩图</button>
    <ul>
      <li v-for="(file, i) in fileList" :key="file.id" :data-index="i">
        &nbsp;&nbsp;{{file.name}}
        <br>
        <img :src="urlList[i]" alt="">
        <span>{{tipList[i]}}</span>
      </li>
    </ul>
  </div>

</template>

<script>
import upIcon from '../assets/upload.png'
import axios from "axios";
export default {
  name: "UpLoad",
  data(){
    return {
      upIcon: upIcon,
      fileList: [],
      urlList: [],
      tipList: [],
      isUpLoadAvailable: false,
    }
  },
  methods: {
    checkFileFormat(files) {
      for (const file of files) {
        if (!/^image/.test(file.type)) {
          return false
        }
      }
      return  true
    },
    addFiles(e) {
      this.fileList = [];
      this.urlList = [];
      this.tipList = [];
      this.isUpLoadAvailable = false;

      if (!this.checkFileFormat(e.target.files)) {
        alert('文件格式不正确！')
        return
      }

      for (const file of e.target.files) {
        this.fileList.push(file);
        this.urlList.push(URL.createObjectURL(file));
        this.tipList.push('图片待上传……');
      }

      if (this.fileList.length) this.isUpLoadAvailable = true;
    },
    upLoad() {
      if (this.isUpLoadAvailable) {
        let formData = new FormData();
        formData.set('name', 'pics');
        this.fileList.forEach((file, i) => {
          this.$set(this.tipList, i, '正在上传中……');
          formData.set('file', file);
          const that = this;
          axios({
            method: 'post',
            url: 'http://10.135.158.56:8001/api/upload',
            data: formData,
            timeout: 3e4,
          }).then(res => {
            if (res.data['status'] === 0) {
              that.$set(that.tipList, i, '上传成功！');
              that.isUpLoadAvailable = false;
            } else {
              alert(res.data['msg'])
            }
          })
        })

        // this.fileList.forEach((file, i) => {
        //   const read = new FileReader() //创建文件读取对象
        //   read.readAsDataURL(file)	//读取file信息将读取到的内容存储到result中
        //   //读取成功触发的函数
        //   const that = this;
        //   read.onload=function(){
        //     axios({
        //       method: 'post',
        //       url: 'http://10.132.60.128:8001/api/upload',
        //       // url: 'http://localhost:8080/api/upload',
        //       data: {picData: this.result},
        //       timeout: 2000,
        //     }).then(res => {
        //       console.log(res)
        //       if (res.data['msg'] === 'ok') that.tipList[i] = '上传成功';
        //       else that.tipList[i] = res.data;
        //       console.log(that.tipList[i])
        //     })
        //   }
        // })

      }
    }
  }
}
</script>

<style scoped>
  div {
    position: absolute;
    top: 450px;
    left: 50px;
    max-width: 270px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid darkblue;
    background-color: lightsteelblue;
  }
  input {
    opacity: 0;
    position: absolute;
    width: 64px;
    height: 64px;
    cursor: pointer;
    left:0;
  }
  ul {
    margin-top: 30px;
  }
  ul li {
    margin-top: 10px;
  }
  ul li img {
    max-width: 100px;
    max-height: 100px;
    margin-top: 10px;
  }
  span {
    text-align: center;
    left: 20px;
    position: relative;
  }

  button {
    /*position: absolute;*/
    cursor: pointer;
    padding: 4px;
    border: 4px ridge rgba(255, 128, 0, 1);
    font: x-large 华文彩云;
    text-shadow: 1px 1px 1px darkred, -1px 1px 1px yellow;
    color: yellow;
    background-color: darkred;
    margin-left:30px;
    margin-top: 10px;
    margin-right:20px;
    float:right;
  }
</style>